<template>
    <div class="common-layout">
       <el-container>
           <el-header class="header_activate">
                <h1>联考卷审核</h1>
               <div class="search_activate" id="top_position"> 
                   <el-input v-model="state.input_user" placeholder="请输入手机或真名" />
                   <el-button type="warning" :icon="Search" @click="searchUserApplicationHandle"></el-button> 
               </div>
               <div class="filter">
                   <el-dropdown @command="handleCommand">
                       <span class="el-dropdown-link">
                           时间筛选
                       <el-icon class="el-icon--right">
                           <arrow-down />
                       </el-icon>
                       </span>
                       <template #dropdown>
                       <el-dropdown-menu>
                            <el-dropdown-item command="0" >不限</el-dropdown-item>
                           <el-dropdown-item command="7">近7天</el-dropdown-item>
                           <el-dropdown-item command="15">近15天</el-dropdown-item>
                           <el-dropdown-item command="30">近30天</el-dropdown-item>
                           <el-dropdown-item command="90" disabled>近90天</el-dropdown-item>
                           <el-dropdown-item command="180" divided>近半年</el-dropdown-item>                           
                       </el-dropdown-menu>
                       </template>
                   </el-dropdown>
               </div>
           </el-header>
           <el-divider />
           <el-main>
               <el-table class="tableClass" :data="state.applicationList" stripe                   
                   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"                    
                    border
               > 
                   <el-table-column type="index" width="45" label="序" />
                   <el-table-column width="75" property="user_info.real_name" label="姓名" />
                   <el-table-column width="120" property="user_info.phone" label="手机" show-overflow-tooltip />
                   <el-table-column width="90" property="question_info.knowledgepoint_cn" label="知识点" show-overflow-tooltip/>            
                   <el-table-column width="160" property="question_info.content" label="内容" show-overflow-tooltip />
                   <el-table-column width="65" label="详情"> 
                        <template #default="scope"> 
                            <el-button size="small" type="primary" @click="viewQuestionDetailClick(scope.row)">详</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column width="75" property="question_info.open_level" label="公开"/>
                    <el-table-column width="75" property="question_info.online" label="上/下线"/>  
                   <el-table-column width="110" property="add_date" label="日期"/>                 
                   <el-table-column width="85" property="status_info.name" label="处理结果"/>
                   <el-table-column align="center" width="90" label="操作" >                        
                       <template #default="scope"> 
                           <el-tooltip
                           class="box-item"
                           effect="dark"
                           content="上线"
                           placement="top"
                           >
                               <el-icon style="width: 1em; height: 1em; margin-right: 10px" @click="handleAgree(scope.row.id)">
                                   <Select />
                               </el-icon>
                           </el-tooltip>
                           <el-tooltip
                           class="box-item"
                           effect="light"
                           content="下线"
                           placement="top"
                           >
                               <CloseBold style="width: 1em; height: 1em;" @click="handleReject(scope.row.id)" />
                           </el-tooltip>
                       </template>
                   </el-table-column>
               </el-table>
               <!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->
               <el-pagination
               background
               layout="total, pre, pager, next"
               :total="state.total"                
               :page-size="state.pageSize"            
               @current-change="handleCurrentChange"
               />
           </el-main>
           <ViewQuestionDetail ref="viewQuestionDetailDialog" :question="state.paperquestionList" />
       </el-container>
   </div>
</template>
 
<script setup>
import { Search, Document, ArrowDown, Select, CloseBold } from '@element-plus/icons-vue'
import {onMounted,  reactive, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'
import ViewQuestionDetail from '@/views/ViewQuestionDetail.vue'

const viewQuestionDetailDialog = ref(null)
const state = reactive({
   input_user: '',
   days: 0,
   applicationList: [],
   total: 0, // 总条数
   currentPage: 1, // 当前页
   pageSize: 10, // 分页大小
   lastGetApplicationsMethod: 'default',
   question:Object,
})
// 获取所有未审核或者再次审核的申请单
const getApplicationsByDefault=()=>{
   let params = {     
       days: state.days,
       page: state.currentPage,
       size: state.size,
   }
   state.lastGetApplicationsMethod = 'default'
   axios.get(`/QuestionOnlineApplicationModelViewSet/`, {params}).then(res => {
       if (res.code==200){
        //    console.log("申请列表：", res)
           state.applicationList = res.data.results
           state.total = res.total
       }else{       
           console.log("error", res.message)
       }
   })
   .catch((error)=>{
       console.log("昵称修改错误：", error)
   })
}
// 搜索所有申请单
const getApplicationsBySearch=()=>{
   let params = { 
       query_key: state.input_user,
       page: state.currentPage,
       size: state.size,
   }
   state.lastGetApplicationsMethod = 'search'
   axios.get(`/QuestionOnlineApplicationModelViewSet/search/`, {params}).then(res => {
       if (res.code==200){
        // console.log("搜索结果：", res)
           state.applicationList = res.data.results
           state.total = res.total
       }else{
            ElMessage.error("没有查询到记录") 
           console.log("error", res.message)
       }
   })
   .catch((error)=>{
       console.log("获取数据错误：", error)
   })
}
onMounted(() => {

   getApplicationsByDefault()
})
//设置天数
const handleCommand=(days=0)=>{
    days = parseInt(days)
   state.days = days
   getApplicationsByDefault()
}
// 同意上线
const handleAgree=(id)=>{
   // console.log("处理同意")
   let params = {
       id: id,
       type: 0,
       operate: 'agree',
       days: state.days,        
   }
   axios.patch(`/QuestionOnlineApplicationModelViewSet/${id}/`, params).then(res => {
       if (res.code==200){
           // console.log("申请列表：", res)
           ElMessage.success("操作成功，同意上线！")
           reGetApplication()
            scrollToTop()
       }else if(res.code==1022){
           ElMessage.error("此操作没必要！")
        }        
       else{
            ElMessage.error("此操作没必要！")
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取数据错误：", error)
   })
}
// 拒绝上线
const handleReject=(id)=>{
   // console.log("处理拒绝")
   let params = {
        id: id,
       type: 0,
       operate: 'reject',
       days: state.days
   }
   axios.patch(`/QuestionOnlineApplicationModelViewSet/${id}/`, params).then(res => {
       if (res.code==200){
           // console.log("申请列表：", res)
           ElMessage.warning("操作成功，下线！")
           reGetApplication()
            scrollToTop()
       }else if(res.code==1022){
           ElMessage.error("此操作没必要！")
       } 
       else{
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取会员激活错误：", error)
   })
}
const searchUserApplicationHandle=()=>{
   getApplicationsBySearch()
}
// 滚到顶端
const scrollToTop=()=>{
   document.querySelector('#top_position').scrollIntoView(true);
}
//点击页码时触发
const handleCurrentChange = (newPage)=>{
   state.currentPage = newPage 
   reGetApplication()
   scrollToTop()
 }
 
 const reGetApplication=()=>{
    if (state.lastGetApplicationsMethod == 'default'){
       getApplicationsByDefault(0, state.days)
   }else{
       getApplicationsBySearch()
   }
 }
const viewQuestionDetailClick=(obj)=>{
    // console.log("传给单题查看详情：",obj)
    state.question = obj.question_info
    viewQuestionDetailDialog.value.open(obj.question_info)
}
</script>

<style scoped>
 .search_activate {
   display: flex;
   flex-flow: row nowrap;
   /* justify-content: space-between; */
   align-items: center;
   margin: 0 auto;
   height: 30px;
 }
 .header_activate{
   display: flex;
   flex-flow: row nowrap;
   justify-content:flex-start;
   /* align-items: center; */
   padding: 0px;
   height: 30px;
   width:800px;
 }
 span{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: medium;
 }
 .tableClass .cell{   
   padding: 0!important;
   height: 20px!important;
   line-height: 20px!important;
   text-align: center;
   font-size: 10px;
 }
</style>